<template>
  <a-modal
    title="上传款式图片"
    :width="600"
    :visible="visible"
    :confirmLoading="uploading"
    @cancel="handleClose">

    <div style="margin: 0px 0px 5px 1px">
      <a-alert message="注意：批量上传款式图片时，图片文件名即为款号。" type="info" show-icon></a-alert>
      <span style="display: inline-block;height: 32px;line-height: 32px;vertical-align: middle;font-weight: bold">上传规则：</span>
      <span style="display: inline-block;height: 32px;margin-left: 6px">
        <a-radio-group v-model="verifyCodeNumType">
        <a-radio :value="1">跳过相同款号</a-radio>
        <a-radio :value="2">覆盖相同款号</a-radio>
      </a-radio-group>
      </span>
    </div>

    <!--<a-upload
      name="file"
      :action="uploadAction"
      :headers='tokenHeader'
      :showUploadList="false"
      :fileList="fileList"
      :multiple="true"
      :directory="true"
      :data="{'verifyCodeNumType':this.verifyCodeNumType}"
      accept=".png,.jpg,.jpeg,.gif,.bmp,.PNG,.JPG,.JPEG,.GIF,.BMP"
      @change="handleChange"
      >-->
    <a-upload
      name="file"
      :showUploadList="false"
      :multiple="true"
      :directory="true"
      :beforeUpload="beforeUploadFile"
      :customRequest="uploadFolderRequest"
      :headers='tokenHeader'
    >
      <a-button style="margin-left: 6px">
        <a-icon type="upload" />
        请选择要上传的图片文件夹
      </a-button>
    </a-upload>


    <template slot="footer">
      <a-button @click="handleClose">关闭</a-button>

    </template>

  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { postAction } from '@/api/manage'
  export default {
    name: 'StyleInfoUploadPicModal',
    props:{
      url:{
        type: String,
        default: '',
        required: false
      },
    },
    data(){
      return {
        successNum: 0,
        arrList: [],
        fileList: [],
        visible:false,
        uploading:false,
        uploadAction:'',
        verifyCodeNumType: 1
      }
    },
    watch: {
      url (val) {
        if(val){
         this.uploadAction = window._CONFIG['domianURL']+val
        }
      }
    },
    computed: {
      tokenHeader(){
        let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
        return head;
      }
    },
    created () {
      this.uploadAction = window._CONFIG['domianURL']+this.url
    },

    methods:{
      uploadFolderRequest(){
        let that = this
        if(that.arrList.length == 0) {
          return
        }
        Promise.all(that.arrList).then(()=>{
          that.$message.success("成功上传"+this.successNum+"张款式图片")
          that.handleClose()
        }).catch(()=>{
        })
        that.arrList = []
      },
      beforeUploadFile(file){
        const formData = new FormData()
        formData.append('verifyCodeNumType', this.verifyCodeNumType)
        formData.append('file', file)
        let a = new Promise((resolve,reject)=>{
            postAction(this.uploadAction, formData).then((res) => {
              if(res.success){
                if(res.code == 200){
                  this.successNum += res.result
                  resolve()
                }
              }
            })
        })
        this.arrList.push(a);
      },
      handleChange(info) {
        let { fileList } = info
        const status = info.file.status
        if (status !== 'uploading') {
        }
        if (status === 'done') {
          this.arrList.push({ uid: fileList[fileList.length - 1].uid, url: info.file.response.result })
        }
        this.fileList = [...fileList] //重点
      },
      handleChange11(info) {
        if (info.file.status === 'done') {
          if (info.file.response.success) {
            this.handleClose()
            this.$message.success(`${info.file.name} 上传成功!`);
          } else {
            this.$message.error(`${info.file.response.message}`);
          }
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.response.message}`);
        }
      },
      handleClose(){
        this.visible = false
        this.arrList = []
        this.fileList = []
        this.uploading = false
        this.successNum = 0
        this.verifyCodeNumType = 1
        this.$emit('ok')
      },
      show(){
        this.arrList = []
        this.fileList = []
        this.uploading = false
        this.visible = true
        this.successNum = 0
        this.verifyCodeNumType = 1
      },
    }
  }
</script>

<style scoped>

</style>